<template>
  <div class="hm-main">
    我是hm-main <HmButton></HmButton>
    <!-- 
        规范：v-for必须要加key
        key的值是有唯一值用唯一值，没有唯一值用下标
        正是因为加了key能提高vue内部的复用性能
     -->
     <p>这是p标签</p>

    <div v-for="item in list" :key="item.id">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  }
}
</script>

<style scoped>
.hm-main {
  margin: 20px 0;
  height: 450px;
  background-color: #f79646;
  color: #fff;
  text-align: center;
  /* line-height: 450px; */
}

p {
  font-size: 24px;
  color: red;
}
</style>
